<template>
  <div class="back">
    <!--头部logo图片-->
    <div style="height: 122px; line-height: 60px;margin-bottom: 2px;text-align: center">
      <span style="font-family: 华文行楷;font-size: 50px;margin-top: 30px">福州历史文化博物馆</span>
      <br>

      <span style="font-family: 'Times New Roman';font-size: 20px;">Fuzhou Historical and Cultural Museum</span>
    </div>

    <el-dialog  title="个人信息" :visible.sync="dialogFormVisible" width="30%">
      <el-form :model="form">
        <el-form-item label="姓名"  >
          <el-input  v-model="form.username" ></el-input>
        </el-form-item>
        <el-form-item label="电话" >
          <el-input v-model="form.phone" ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" >
          <el-input v-model="form.email" ></el-input>
        </el-form-item>
        <el-form-item label="头像" prop="head">
          <el-upload
              class="avatar-uploader"
              :action="'http://localhost:9090/api/file/upload?token=' + this.admin.token"
              :show-file-list="false"
              :on-success="handleCoverSuccess"
          >

            <img v-if="form.head" :src="form.head " class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="update">修 改</el-button>
      </div>
    </el-dialog >
    <el-dialog title="留言消息" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column property="parentId" label="留言景点" width="150"></el-table-column>
        <el-table-column property="content" label="留言信息" width="200"></el-table-column>
        <el-table-column property="createtime" label="留言时间"></el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="修改密码" :visible.sync="FormVisible" width="30%">
      <el-form :model="pass" label-width="100"px ref="formRef" :rules="rules">
        <el-form-item label="旧密码" prop="password">
          <el-input v-model="pass.password" autocomplete="off" show-password></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPass">
          <el-input v-model="pass.newPass" autocomplete="off" show-password></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="FormVisible = false">取 消</el-button>
        <el-button type="primary" @click="savePass">确 定</el-button>
      </div>
    </el-dialog>


    <!--导航条-->
    <el-menu   router
               class="el-menu-demo"
               mode="horizontal"
               background-color="#545c64"
               text-color="#fff"
               active-text-color="#ffd04b">
      <el-menu-item style="font-size: 20px;margin-left: 620px ;color: white" index="/hello">首页</el-menu-item>
      <el-menu-item style="font-size: 20px" index="/going_fuzhou">走进福州</el-menu-item>
      <el-menu-item style="font-size: 20px" index="/zixun_fuzhou">福州资讯</el-menu-item>
      <el-menu-item style="font-size: 20px" index="/history">发展历史</el-menu-item>
      <el-menu-item style="font-size: 20px" index="/tese_wenhua">特色文化</el-menu-item>
      <el-menu-item style="font-size: 20px" index="/lvyou_zhinan">旅游指南</el-menu-item>
      <div v-if="admin.username==null" style="margin-left: 1830px;margin-top: 10px">
        <el-button @click="$router.push('/login')">登录</el-button>
      </div>
      <div style="margin-top:10px;flex: 1;text-align: right ;padding-right: 20px" >
        <div v-if="admin.username!=null">
          <el-dropdown size="medium">
            <span class="el-dropdown-link" style="cursor: pointer">
              <el-avatar :src="form.head"></el-avatar>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="dialogFormVisible=true">个人信息</el-dropdown-item>
              <el-dropdown-item @click.native="dialogTableVisible=true" >我的留言</el-dropdown-item>
              <el-dropdown-item @click.native="FormVisible=true" >修改密码</el-dropdown-item>
              <el-dropdown-item v-if="admin.identity===0" ><div @click="$router.push('/home')">后台管理</div></el-dropdown-item>
              <el-dropdown-item ><div style="width: 50px; text-align: center" @click="logout">退出</div></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </el-menu>

    <div style="background-color: white; margin-left: 500px; width:900px">
      <el-card>
        <div style="font-size: 50px;font-family: 黑体;font-weight: bolder; text-align: center">
          {{ text.name }}
        </div>

        <br>
        <span style="font-size: 9px;color: #8c939d;">地址:{{text.addr}}</span>
        <span style="font-size: 20px;font-family: 华文彩云;margin-left: 490px">推荐人数：{{ text.num }}</span>
        <el-divider></el-divider>
        <div style="white-space: pre-line;white-space: pre-wrap">
          <span>{{ text.body }}</span>

        </div>
        <div     style="text-align: center;" >
          <img style="width: 500px;" :src="text.photo">
        </div>

        <p></p>
        <el-divider></el-divider>

        <el-form :inline="true" :model="input">
          <el-input v-model="input.content" placeholder="请输入内容" type="textarea"
                    maxlength="100" show-word-limit style="width: 500px;margin-left: 200px"></el-input>

        </el-form>
        <!--输入评论-->
        <div>
          <el-button type="primary" round size="large" style="margin-left: 350px;margin-top: 10px" @click="comment">
            发布评论
          </el-button>
          <el-button type="success" round size="large" @click="recommend">推荐景点</el-button>
        </div>

        <!--评论内容-->
        <div style="display: flex;padding: 20px" v-for="item in messages">
          <!--头像-->
          <div style="text-align: center;flex: 1">
            <el-avatar :src="item.head"></el-avatar>

          </div>
          <!--用户名-->
          <div style="padding: 0 10px;flex:5">

            <div><b>{{ item.username }}</b>
              <!--评论内容-->
              <div style="margin-top: 10px">{{ item.content }}</div>
              <span style="font-size:10px ;color: darkgrey "> {{ item.createtime }}</span></div>
            <!--判断这条评论是不是当前登录用户的评论，是则显示删除按钮，否则不显示-->
            <el-button type="text" size="mini" @click="show(item.username,item.id)">回复</el-button>
            <el-button type="text" size="mini" @click="open(item.id)" v-if="item.username===admin.username">删除
            </el-button>

            <!--回复消息-->

            <div v-for="i in item.children" style="background-color: pink">

              <el-avatar :src="i.head"></el-avatar>
              <b>{{ i.username }}===回复给===>{{item.username}}</b>
              <el-avatar :src="item.head"></el-avatar>
              <div style="margin-top: 10px">
                <span style="margin-top: 50px">{{ i.content }}</span>

              </div>
              <span style="font-size:10px ;color: darkgrey ">{{ i.createtime }}</span>
              <br>
              <el-button type="text" size="mini" @click="show(i.username,i.id)">回复</el-button>
              <el-button type="text" size="mini" @click="open(i.id)" v-if="i.username===admin.username">删除</el-button>

              <div v-for="j in i.children">
                <span>{{j.username}}===回复给===>{{i.username}}</span>
                <br>
                <div style="margin-top: 10px">{{j.content}}</div>

                <span style="font-size:10px ;color: darkgrey ">{{j.createtime}}</span>
                <el-button type="text" size="mini" @click="open(j.id)" v-if="j.username===admin.username">删除</el-button>
              </div>
            </div>
          </div>
        <br>
        </div>
        <!--回复评论-->
        <el-form  :inline="true" :model="input1">
          <el-input  maxlength="100" show-word-limit style="width: 500px;margin-left: 200px"
                      v-model="input1.content" v-show="visible" :placeholder="username">

          </el-input>
          <el-button style="margin-left: 5px" type="primary" v-show="visible" @click="comment1">
            发送
          </el-button>
        </el-form>



      </el-card>

    </div>

    <div>
      <el-card style="width: 1900px;background-color:rgba(30, 144, 255,0.1);border: none;">
        <div style=" text-align: center">

          <span style="font-size: 30px;font-weight:bolder ;color: black;">福 州 历 史 文 化 博 物 馆</span>
          <br>
          <span style="font-family: 'Times New Roman';margin-left: 45px"> Fuzhou Historical and Cultural Museum </span>
          <br>
          <span>  </span>
          <br>
          <span>有任何疑问请联系管理员</span>
          <br>
          <br>
          <span style="font-size: large;font-weight:bolder;color: black;">管理员电话:</span>
          <span>  </span>
          <span>123-456789</span>
          <br>
          <br>
          <b style="font-family: 楷体;">福州历史  版权所有©</b>


        </div>

      </el-card>
    </div>
  </div>
</template>

<script>
import request from "@/util/request";
import axios from "axios";
import Cookies from "js-cookie";

export default {
  name: "details",
  data() {
    return {
      visible: false,
      text: {},
      username:{},
      mid:{},
      huifu: {
        message: '',
      },
      input: {
        parentId: '',
        content: '',
        userId: '',
        mid:'',

      },
      input1: {
        parentId: '',
        content: '',
        userId: '',
        mid:'',

      },
      tuijian: {
        userId: '',
        travelId: ''
      },
      messages: {

      },
      admin: Cookies.get('admin') ? JSON.parse(Cookies.get('admin')) : {},
      head:{},
      dialogFormVisible: false,
      FormVisible: false,
      dialogTableVisible:false,
      formLabelWidth: '120px',
      form:{
        username: '',
        phone:'',
        email:''
      },
      pass:{
        username:""
      },
      rules: {
        newPass: [
          {required: true, message: '请输入新密码', trigger: 'blur'},
          {min:6,max:12,message: "长度在6-12个字符",trigger: 'blur'}
        ]
      },

    }
  },
  created() {
    this.load()
    this.mes()
    this.mes1()
    const id = this.admin.id
    request.get('/admin/' + id).then(res => {
      this.form = res.data;

    })


  },
  methods: {
    mes1() {
      const _id = this.admin.id//当前用户id
      request.get("/travel/usermes/" + _id).then(res => {
        if (res.code == "200") {
          this.gridData = res.data
        }
      })
    },
    update(){
      request.put("/admin/update",this.form).then(res=>{
        if (res.code=="200"){
          this.dialogFormVisible=false;
          this.$notify.success("修改成功")

        }else{
          this.$notify.error(res.msg)
        }
      })
    },
    logout(){
      //退出时清空cookie
      Cookies.remove('admin')
      this.$router.push("/login")
    },
    savePass(){
      this.pass.username=this.admin.username;
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          request.put("/admin/pass",this.pass).then(res=>{
            if (res.code=='200') {
              this.$notify.success("修改成功")
              this.FormVisible = false
              Cookies.remove("admin")
              this.$router.push("/login")
            }else{
              this.$notify.error(res.msg)
            }
          })
        }
      })
    },
    show(username,id) {
      this.visible = !this.visible
      this.username="回复给"+username
      this.mid=id
      //console.log(id);
    },
    open(id) {
      this.$confirm('确定删除该条评论吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.del(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    load() {
      const id = this.$route.query.id
      request.get("/travel/" + id).then(res => {
        if (res.code == "200") {
          this.text = res.data
          //console.log(this.messages)
          //console.log(this.messages)
        }
      })
    },
    mes() {
      const id = this.$route.query.id//当前景点id
      request.get("/travel/mes/" + id).then(res => {
        if (res.code == "200") {
          this.messages = res.data
         console.log(this.messages)
        }
      })

    },
    tree(){
      for (let i = 0; i <this.messages.length ; i++) {
        //console.log(this.messages[i].children)
        if (this.messages[i].children){
          //console.log(this.messages[i].children)
          this.childrens=this.messages[i].children
         console.log(this.childrens)
        }
        //this.tree()
      }
    },
    comment() {
      const _id = this.$route.query.id;
      this.input.parentId = _id //当前景点的ID
      this.input.username = this.admin.username//从cookie中取得当前登录用户的用户名
      this.input.userId = this.admin.id
      this.input.head=this.admin.head
      request.post("/travel/push", this.input).then(res => {
        if (res.code == "200") {
          this.mes()
          this.input.content = ''
          this.$notify.success("评论成功")

        } else {
          this.$notify.error("评论失败")
        }
      })
    },
    comment1() {
      const _id = this.$route.query.id;
      this.input1.parentId = _id //当前景点的ID
      this.input1.username = this.admin.username//从cookie中取得当前登录用户的用户名
      this.input1.userId = this.admin.id
      this.input1.mid=this.mid
      this.input1.head=this.admin.head
      request.post("/travel/push", this.input1).then(res => {
        if (res.code == "200") {
          this.mes()
          this.input1.content = ''
          this.$notify.success("评论成功")
          this.visible=false;

        } else {
          this.$notify.error("评论失败")
        }
      })
    },
    recommend() {
      const _id = this.$route.query.id;//当前页面ID
      this.tuijian.travelId = _id
      this.tuijian.userId = this.admin.id//从cookie中取到用户ID
      console.log(this.tuijian)
      request.post("/travel/recommend", this.tuijian).then(res => {
        if (res.code == "200") {
          this.$notify.success("推荐成功")
          this.load()
        } else {
          this.$notify.info("您已经推荐过了")
        }
      })
    },
    del(id) {
      request.delete("/travel/" + id).then(res => {
        console.log(id)
        if (res.code == "200") {
          this.mes()
        }
      })
    }
  }

}
</script>

<style scoped>
.box {
  width: 100%; /*宽度是要的，否则怎么水平居中呢？高度同理*/
  height: 200px; /*保险起见，还可以给子元素img设置最大宽高*/
  text-align: center;
  line-height: 200px;
  vertical-align: middle;
  font-size: 0
  }
</style>